import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import { routerRedux } from 'dva/router';
import {
  Row, Col, Card, Form, Input, Select, Icon, Button, Modal, message, Badge, Divider, Tag, Popconfirm, Radio, Checkbox, Upload
} from 'antd';
import ScoreGoodsModal from 'components/Point/ScoreGoodsModal';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import { imgPrex } from '../../utils/constData';

const FormItem = Form.Item;
const { Option } = Select;
import styles from './Position.less';

const RadioGroup = Radio.Group;



@connect(({ goods, loading }) => ({
  goods,
  positionList: goods.positionList,
  scoreGoodsList: goods.scoreGoodsList,
  categoryList: goods.categoryList,
  loading: loading.models.goods,
}))
@Form.create()
export default class OptPosition extends PureComponent {
  state = {
    modalVisible: false,

    current: null,
    currentGoodsId: null,

    operSts0: 0,
    positionId0: 0,
    operImg0: "https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png",
    operType0: 0,
    advertisingUrl0: null,
    goodsName0: null,
    goodsId0: null,
    fileList0: [],

    operSts1: 0,
    positionId1: 1,
    operImg1: "https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png",
    operType1: 0,
    advertisingUrl1: null,
    goodsName1: null,
    goodsId1: null,
    fileList1: [],

    operSts2: 0,
    positionId2: 2,
    operImg2: "https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png",
    operType2: 0,
    advertisingUrl2: null,
    goodsName2: null,
    goodsId2: null,
    fileList2: [],

    operSts3: 0,
    positionId3: 3,
    operImg3: "https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png",
    operType3: 0,
    advertisingUrl3: null,
    goodsName3: null,
    goodsId3: null,
    fileList3: [],

    operSts4: 0,
    positionId4: 4,
    operImg4: "https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png",
    operType4: 0,
    advertisingUrl4: null,
    goodsName4: null,
    goodsId4: null,
    fileList4: [],
  };

  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'goods/fetchPositionList',
      callback: (data) => this._callback(data)
    });
    dispatch({
      type: 'goods/fetchScoreGoodsList',
    });
    dispatch({
      type: 'goods/fetchCategoryList',
    });
  }

  _callback(data) {
    console.log('111111111111111111111111111111111callback data list', data)
    let newList = this.state.positionList;
    if (data && (data.length > 0)) {
      if (data.length <= 5) {
        for (let i = 0; i < data.length; i++) {
          let item = {};
          item['positionId' + i] = data[i].positionId;
          item['operSts' + i] = data[i].operSts;
          item['operImg' + i] = data[i].operImg;
          item['operType' + i] = data[i].operType;
          item['advertisingUrl' + i] = data[i].advertisingUrl;
          item['goodsId' + i] = data[i].goodsId;
          item['goodsName' + i] = data[i].goodsName;
          this.setState(item)
        }
      } else if (data.length > 5) {
        for (let i = 0; i < 5; i++) {
          let item = {};
          item['positionId' + i] = data[i].positionId;
          item['operSts' + i] = data[i].operSts;
          item['operImg' + i] = data[i].operImg;
          item['operType' + i] = data[i].operType;
          item['advertisingUrl' + i] = data[i].advertisingUrl;
          item['goodsName' + i] = data[i].goodsName;
          item['goodsName' + i] = data[i].goodsName;
          this.setState(item)
        }
      }
    }
  }

  _operSts(i, e) {
    let value = e.target.checked ? 1 : 0;
    let data = {};
    data['operSts' + i] = value;
    console.log(data)
    this.setState(data)
  }

  _onRemove(type, file) {
    let data = {}
    data['fileList' + type] = []
    this.setState(data)

    let fieldImg = {};
    fieldImg['name' + type] = file;
  }

  _beforeUpload(type, file) {
    let data = {}
    data['fileList' + type] = [file]
    this.setState(data)

    let fieldImg = {};
    fieldImg['name' + type] = file;

    this.props.form.setFieldsValue(fieldImg);

    console.log('file======', this.props.form.getFieldValue('name1'))

    return false;
  }

  setModalVisible(type, flag) {
    let currentId = null;
    switch (type) {
      case 0: currentId = this.state.goodsId0; break;
      case 1: currentId = this.state.goodsId1; break;
      case 2: currentId = this.state.goodsId2; break;
      case 3: currentId = this.state.goodsId3; break;
      case 4: currentId = this.state.goodsId4; break;
    }

    console.log(this.state.currentId)
    if (!flag) {
      this.setState({
        modalVisible: flag,
        current: null,
        currentGoodsId: null,
      })
    } else {
      this.setState({
        modalVisible: flag,
        current: type,
        currentGoodsId: currentId,
      })
    }
  }

  _goodsSearch(fieldsValue) {
    this.props.dispatch({
      type: 'goods/fetchScoreGoodsList',
      payload: fieldsValue,
    });
  }

  _goodsOk(type, checkedData) {
    console.log('checkedData', checkedData)

    let goodsId = checkedData[0].goodsId;
    let goodsName = checkedData[0].goodsName;

    let dataId = {}
    let dataName = {}
    dataId['goodsId' + type] = goodsId;
    dataId['goodsName' + type] = goodsName;

    this.setState(dataId);
    this.setState(dataName)

    this.props.form.setFieldsValue(dataId)
    this.props.form.setFieldsValue(dataName)

    this.setModalVisible(type, false)
  }

  _submit() {
    this.props.form.validateFields((err, fieldsValue) => {
      console.log('fieldsValuefieldsValue', fieldsValue)
      if (err) return;

      if (this.state.operSts0 == 1) {
        let sub = {}
        sub['operSts'] = this.state.operSts0;
        sub['operType'] = fieldsValue.operType0;
        sub['advertisingUrl'] = fieldsValue.advertisingUrl0;
        sub['goodsId'] = fieldsValue.goodsId0;
        sub['name'] = fieldsValue.name0.file;
        if (this.state.positionId0 > 4) {  //已存在，编辑
          sub['positionId'] = fieldsValue.positionId0;
          this.props.dispatch({
            type: 'goods/editPosition',
            payload: sub,
          })
        } else {
          this.props.dispatch({
            type: 'goods/addPosition',
            payload: sub,
          })
        }
      }

      if (this.state.operSts1 == 1) {
        let sub = {}
        sub['operSts'] = this.state.operSts1;
        sub['operType'] = fieldsValue.operType1;
        sub['advertisingUrl'] = fieldsValue.advertisingUrl1;
        sub['goodsId'] = fieldsValue.goodsId1;
        sub['name'] = fieldsValue.name1 ? fieldsValue.name1.file : null;
        if (this.state.positionId0 > 4) {  //已存在，编辑
          sub['positionId'] = fieldsValue.positionId1;
          this.props.dispatch({
            type: 'goods/editPosition',
            payload: sub,
          })
        } else {
          this.props.dispatch({
            type: 'goods/addPosition',
            payload: sub,
          })
        }
      }

      if (this.state.operSts2 == 1) {
        let sub = {}
        sub['operSts'] = this.state.operSts2;
        sub['operType'] = fieldsValue.operType2;
        sub['advertisingUrl'] = fieldsValue.advertisingUrl2;
        sub['goodsId'] = fieldsValue.goodsId2;
        if (this.state.positionId2 > 4) {  //已存在，编辑
          sub['positionId'] = fieldsValue.positionId2;
          this.props.dispatch({
            type: 'goods/editPosition',
            payload: sub,
          })
        } else {
          this.props.dispatch({
            type: 'goods/addPosition',
            payload: sub,
          })
        }
      }

      if (this.state.operSts3 == 1) {
        let sub = {}
        sub['operSts'] = this.state.operSts3;
        sub['operType'] = fieldsValue.operType3;
        sub['advertisingUrl'] = fieldsValue.advertisingUrl3;
        sub['goodsId'] = fieldsValue.goodsId3;
        if (this.state.positionId3 > 4) {  //已存在，编辑
          sub['positionId'] = fieldsValue.positionId3;
          this.props.dispatch({
            type: 'goods/editPosition',
            payload: sub,
          })
        } else {
          this.props.dispatch({
            type: 'goods/addPosition',
            payload: sub,
          })
        }
      }

      if (this.state.operSts4 == 1) {
        let sub = {}
        sub['operSts'] = this.state.operSts4;
        sub['operType'] = fieldsValue.operType4;
        sub['advertisingUrl'] = fieldsValue.advertisingUrl4;
        sub['goodsId'] = fieldsValue.goodsId4;
        if (this.state.positionId4 > 4) {  //已存在，编辑
          sub['positionId'] = fieldsValue.positionId4;
          this.props.dispatch({
            type: 'goods/editPosition',
            payload: sub,
          })
        } else {
          this.props.dispatch({
            type: 'goods/addPosition',
            payload: sub,
          })
        }
      }



    })
  }

  render() {
    const { one } = this.state;
    const { form } = this.props;
    return (
      <div>
        <Row gutter={32}>
          <Col key={0} className={styles.colbg} span={6}>
            <div className={styles.wrapper}>
              <Checkbox checked={this.state.operSts0 == 1 ? true : false} onChange={(e) => this._operSts(0, e)}>启动</Checkbox>
              {
                (this.state.fileList0.length > 0) ?
                  <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', backgroundColor: '#ccc', width: '100%', height: '150px' }}>
                    {this.state.fileList0[0].name}
                  </div>
                  :
                  <img
                    style={{ width: '100%' }}
                    src={(this.state.operImg0.indexOf('https://') != -1) ? this.state.operImg0 : (imgPrex + this.state.operImg0)}
                    alt=""
                  />
              }
              <FormItem label="">
                {form.getFieldDecorator('name0', {
                  rules: [{ required: this.state.operSts0 == 0 ? false : true, message: '请选择图片' }],
                  initialValue: this.state.operImg0 ? (this.state.operImg0.indexOf('https://') == "-1") ? this.state.operImg0 : null : null,
                })(
                  <Upload
                    onRemove={(file) => this._onRemove(0, file)}
                    beforeUpload={(file) => this._beforeUpload(0, file)}
                  // fileList={this.state.fileList0}
                  >
                    <Button disabled={this.state.operSts0 == 0 ? true : false}>
                      <Icon type="upload" />选择图片
                    </Button>
                  </Upload>
                )}
              </FormItem>

              <FormItem label="">
                {form.getFieldDecorator('operType0', {
                  rules: [{ required: this.state.operSts0 == 0 ? false : true, message: '请选择图片' }],
                  initialValue: this.state.operType0,
                })(
                  <RadioGroup disabled={this.state.operSts0 == 0 ? true : false}>
                    <Radio value={0}>广告链接</Radio>
                    <Radio value={1}>积分商品</Radio>
                  </RadioGroup>
                )}
              </FormItem>

              {form.getFieldValue('operType0') == 0 ?
                <FormItem label="">
                  {form.getFieldDecorator('advertisingUrl0', {
                    rules: [{ required: this.state.operSts0 == 0 ? false : true, message: '广告链接地址不能为空' }],
                    initialValue: this.state.advertisingUrl0 ? this.state.advertisingUrl0 : null,
                  })(
                    <Input maxLength={100} placeholder={'请输入广告链接'} disabled={this.state.operSts0 == 0 ? true : false}></Input>
                  )}
                </FormItem>
                :
                <div>
                  <FormItem label="">
                    {form.getFieldDecorator('goodsName0', {
                      rules: [{ required: this.state.operSts0 == 0 ? false : true, message: '商品不能为空' }],
                      initialValue: this.state.goodsName0 ? this.state.goodsName0 : null,
                    })(
                      <span>
                        <Input disabled={true} value={this.state.goodsName0} style={{ width: '65%' }}></Input>
                        <Button type="primary" disabled={this.state.operSts0 == 0 ? true : false}
                          onClick={() => this.setModalVisible(0, true)}
                        >选择</Button>
                      </span>
                    )}
                  </FormItem>
                  <FormItem label="">
                    {form.getFieldDecorator('goodsId0', {
                      initialValue: this.state.goodsId0 ? this.state.goodsId0 : null,
                    })(
                      <Input disabled={true} value={this.state.goodsId0}></Input>
                    )}
                  </FormItem>
                </div>
              }
            </div>
          </Col>


          <Col key={1} className={styles.colbg} span={6}>
            <div className={styles.wrapper}>
              <Checkbox checked={this.state.operSts1 == 1 ? true : false} onChange={(e) => this._operSts(1, e)}>启动</Checkbox>
              {
                (this.state.fileList1.length > 0) ?
                  <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', backgroundColor: '#ccc', width: '100%', height: '150px' }}>
                    {this.state.fileList1[0].name}
                  </div>
                  :
                  this.state.operImg1.indexOf("https://") != -1 ?
                    <img
                      style={{ width: '100%' }}
                      src={(this.state.operImg1.indexOf('https://') != -1) ? this.state.operImg1 : (imgPrex + this.state.operImg1)}
                      alt=""
                    />
                    :
                    null
              }
              <FormItem label="">
                {form.getFieldDecorator('name1', {
                  rules: [{ required: this.state.operSts1 == 0 ? false : true, message: '请选择图片' }],
                  initialValue: this.state.operImg1 ? (this.state.operImg1.indexOf('https://') == "-1") ? this.state.operImg1 : null : null,
                })(
                  <Upload
                    onRemove={(file) => this._onRemove(1, file)}
                    beforeUpload={(file) => this._beforeUpload(1, file)}
                  // fileList={this.state.fileList1}
                  >
                    <Button disabled={this.state.operSts1 == 0 ? true : false}>
                      <Icon type="upload" />选择图片
                    </Button>
                  </Upload>
                )}
              </FormItem>

              <FormItem label="">
                {form.getFieldDecorator('operType1', {
                  rules: [{ required: this.state.operSts1 == 0 ? false : true, message: '请选择图片' }],
                  initialValue: this.state.operType1,
                })(
                  <RadioGroup disabled={this.state.operSts1 == 0 ? true : false}>
                    <Radio value={0}>广告链接</Radio>
                    <Radio value={1}>积分商品</Radio>
                  </RadioGroup>
                )}
              </FormItem>

              {form.getFieldValue('operType1') == 0 ?
                <FormItem label="">
                  {form.getFieldDecorator('advertisingUrl1', {
                    rules: [{ required: this.state.operSts1 == 0 ? false : true, message: '广告链接地址不能为空' }],
                    initialValue: this.state.advertisingUrl1 ? this.state.advertisingUrl1 : null,
                  })(
                    <Input placeholder={'请输入广告链接'} disabled={this.state.operSts1 == 0 ? true : false}></Input>
                  )}
                </FormItem>
                :
                <div>
                  <FormItem label="">
                    {form.getFieldDecorator('goodsName1', {
                      rules: [{ required: this.state.operSts1 == 0 ? false : true, message: '商品不能为空' }],
                      initialValue: this.state.goodsName1 ? this.state.goodsName1 : null,
                    })(
                      <span>
                        <Input disabled={true} value={this.state.goodsName1} style={{ width: '65%' }}></Input>
                        <Button type="primary" disabled={this.state.operSts1 == 0 ? true : false}
                          onClick={() => this.setModalVisible(1, true)}
                        >选择</Button>
                      </span>
                    )}
                  </FormItem>
                  <FormItem label="">
                    {form.getFieldDecorator('goodsId1', {
                      initialValue: this.state.goodsId1 ? this.state.goodsId1 : null,
                    })(
                      <Input disabled={true} value={this.state.goodsId1}></Input>
                    )}
                  </FormItem>
                </div>
              }
            </div>
          </Col>



        </Row>
        <div className={styles.optWrapper}>
          <Button type="primary" icon="save" size="large" onClick={() => this._submit()}>
            保存
          </Button>
        </div>

        <ScoreGoodsModal goodsModalVisible={this.state.modalVisible}
          categoryList={this.props.categoryList}
          scoreGoodsList={this.props.scoreGoodsList}
          current={this.state.current}
          goodsId={this.state.currentGoodsId}
          setModalVisible={(type, flag) => this.setModalVisible(type, flag)}
          goodsSearch={(fieldsValue) => this._goodsSearch(fieldsValue)}
          goodsOk={(type, checkedData) => this._goodsOk(type, checkedData)}
        // goodsCancle= {() => this._closeGoodsModal()}
        />
      </div>
    );
  }
}
